<template>
  <div ref="chart1" id="chart1"></div>
</template>

<script>
export default {
  name: "EchartsPie",
  data() {
    return {
      company_type_dict: [],
      company_size_dict: [],
    };
  },
  computed: {},
  mounted() {
    this.design_pie();
  },
  methods: {
    options() {},
    design_pie() {
      this.axios.get("/api/design/pie").then((res) => {
        // 判断返回信息状态
        if (res.data.code == 200) {
          this.company_type_dict = res.data.company_type_dict;
          this.pie();
        }
      });
    },
    pie() {
      // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(this.$refs["chart1"]);

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "企业类型分析图",
        subtext: "",
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        left: "left"
      },
      series: [
        {
          name: "企业类型",
          type: "pie",
          radius: "50%",
          data: this.company_type_dict,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
#chart1 {
  width: 50%;
  height: 400px;
}
</style>
